<template>
    <div v-if="store.auth.role!='学生'">
    <el-button class="mt-4" style="" @click="dialogVisible=true" type="success">新增</el-button>
    </div>
    <div v-if="store.auth.role!='学生'">
        <el-input placeholder="按学号搜索" v-model="idd" type="text" style="width: 140px"/>
        <el-button type="primary" @click="searchbyid">搜索</el-button>
    </div>
    <div v-if="store.auth.role!='学生'">
    <el-upload
            :show-file-list="false"
            :before-upload="beforeUpload"
            :on-success="onSuccess"
            :on-error="onError"
            :disabled="importDisabled"
            style="display: inline-flex;margin-right: 10px;"
            :action="'http://localhost:8080/data/import?user='+store.auth.user">
        <el-button size="small" :disabled="importDisabled" type="success">
            <el-icon class="el-icon--left"><Upload /></el-icon>{{importDataText}}
        </el-button>
    </el-upload>
    </div>
    <el-table :data="datas.slice((pageNum-1)*pageSize,pageNum*pageSize)" style="width: 100%" max-height="500" border :row-style="rowStyle">
        <el-table-column fixed label="序号" width="100">
            <template #default="scopes">
                {{ scopes.$index+1 }}
            </template>
        </el-table-column>
        <el-table-column fixed prop="id" label="学号" width="100" />
        <el-table-column fixed prop="name" label="姓名" width="100" />
        <el-table-column prop="major" label="专业" width="100" />
        <el-table-column prop="classi" label="班级" width="100" />
        <el-table-column prop="course" label="科目" width="100" />
        <el-table-column prop="teachername" label="任课教师" width="100" />
        <el-table-column prop="gredit" label="学分" width="100" />
        <el-table-column prop="escore" label="考试成绩" width="100" />
        <el-table-column prop="ascore" label="平时成绩" width="100" />
        <el-table-column prop="fscore" label="总成绩" width="100"  />/>
        <el-table-column fixed="right" label="操作" width="200">
            <template #default="scope">
                <div v-if="store.auth.role!='学生'">
                <el-button
                        link
                        type="warning"
                        size="small"
                        @click.prevent="getinfo(scope.$index)"
                        :class="scope.row.fscore < 60 ? 'red-bg' : ''"
                >
                    发送预警
                </el-button>
                <el-button
                        link
                        type="primary"
                        size="small"
                        @click.prevent="getScoreByid(scope.$index)"
                >
                    修改
                </el-button>
                    <el-button
                            link
                            type="primary"
                            size="small"
                            @click.prevent="deleteRow(scope.$index)"
                    >
                        删除
                    </el-button>
                </div>
                <div v-if="store.auth.role=='学生'">无操作权限</div>
            </template>
        </el-table-column>
    </el-table>
    <div class="pagination">
        <el-pagination
                background
                layout="sizes,prev,pager,next,jumper,->,total"
                :page-size.sync="pageSize"
                :current-page.sync="pageNum"
                :page-sizes="[5,8,10,15]"
                :total="totals"
                :hide-on-single-page="true"
                @current-change="getList"
                @size-change="getList1"
        />
    </div>
    <el-dialog title="填写信息" v-model="dialogVisible">
        <el-form :model="stu">
            <el-input placeholder="学号" v-model="stu.id" type="text" />
            <el-input placeholder="姓名" v-model="stu.name" type="text" />
            <el-input placeholder="专业" v-model="stu.major" type="text" />
            <el-input placeholder="班级" v-model="stu.classi" type="text" />
            <el-input placeholder="科目" v-model="stu.course" type="text" />
            <el-input placeholder="任课教师" v-model="stu.teachername" type="text" />
            <el-input placeholder="学分" v-model="stu.gredit" type="text" />
            <el-input placeholder="考试成绩" v-model="stu.escore" type="text" />
            <el-input placeholder="平时成绩" v-model="stu.ascore" type="text" />
            <el-input placeholder="总成绩" v-model="stu.fscore" type="text" />
            <el-button type="warning" @click="dialogVisible=false">取消</el-button>
            <el-button type="primary" @click="add">确认</el-button>
        </el-form>
    </el-dialog>
    <el-dialog title="修改信息" v-model="dialogVisibles">
        <el-form :model="stus">
            <el-input placeholder="学号" v-model="stus.id" type="text" disabled/>
            <el-input placeholder="姓名" v-model="stus.name" type="text" disabled/>
            <el-input placeholder="专业" v-model="stus.major" type="text" disabled/>
            <el-input placeholder="班级" v-model="stus.classi" type="text" disabled/>
            <el-input placeholder="科目" v-model="stus.course" type="text" disabled/>
            <el-input placeholder="任课教师" v-model="stus.teachername" type="text" disabled/>
            <el-input placeholder="学分" v-model="stus.gredit" type="text" disabled/>
            <el-input placeholder="考试成绩" v-model="stus.escore" type="text" disabled/>
            <el-input placeholder="平时成绩" v-model="stus.ascore" type="text" />
            <el-input placeholder="总成绩" v-model="stus.fscore" type="text" />
            <el-button type="warning" @click="dialogVisibles=false">取消</el-button>
            <el-button type="primary" @click="adds">确认</el-button>
        </el-form>
    </el-dialog>
    <el-dialog title="设置预警信息" v-model="dialogVisibless">
        <el-form :model="stuss">
            <el-input placeholder="学号" v-model="stuss.stuid" type="text" disabled/>
            <el-input placeholder="姓名" v-model="stuss.stuname" type="text" disabled/>
            <el-input placeholder="专业" v-model="stuss.stumajor" type="text" disabled/>
            <el-input placeholder="班级" v-model="stuss.stuclassi" type="text" disabled/>
            <el-input placeholder="信息编号" v-model="stuss.warningid" type="text" />
            <el-select v-model="stuss.warningtype" placeholder="请选择预警类型" clearable>
                <el-option label="轻度" value="1" />
                <el-option label="中度" value="2" />
                <el-option label="重度" value="3" />
            </el-select>
            <el-input placeholder="预警详情" v-model="stuss.detail" type="textarea" resize="none" :rows="3" />
            <el-button type="warning" @click="dialogVisibless=false">取消</el-button>
            <el-button type="primary" @click="send">发送</el-button>
        </el-form>
    </el-dialog>
</template>

<script setup>
import { ref,onMounted} from 'vue'
import {ElMessage} from 'element-plus'
import { get,post } from '@/utils/request.js'
import { reactive } from 'vue'
import {userStore} from '@/stores/counter.js'
import {Upload} from '@element-plus/icons-vue'

const importDataText=ref('导入数据')
const importDisabled=ref(false)
const store=userStore()
const datas=ref([])
const dialogVisible=ref(false)
const dialogVisibles=ref(false)
const dialogVisibless=ref(false)
const num=ref('')
const idd=ref('')
const types=ref('')
const totals=ref('')
const pageNum=ref(1)
const pageSize=ref(5)


const rowStyle=({row,index})=>{
if(row.fscore < 60 )
return { 'color': 'red','font-weight': 'bolder'}
else return ''
}

const onError=()=>{
                importDataText.value = '导入数据';
                this.importDisabled.value = false;

                this.$message.success("导入失败！");
            }
            const onSuccess=()=> {
            	// 成功后文本修改为原来的导入数据
                importDataText.value = '导入数据';
                // 将上传组件改为允许使用
                importDisabled.value = false;
                // 调用刷新数据的方法

                // message 弹出消息
                ElMessage.success("导入成功！");
            }
const beforeUpload=()=> {
            	// 将文本修改为正在导入
                importDataText.value = '正在导入';
                // 将其上传组件暂时禁用
                importDisabled.value = true;
            }


const stu = reactive({
warningid:'',
id:'',
name:'',
major:'',
classi:'',
course:'',
teachername:'',
gredit:'',
escore:'',
ascore:'',
fscore:''
})

const stus = reactive({
id:'',
name:'',
major:'',
classi:'',
course:'',
teachername:'',
gredit:'',
escore:'',
ascore:'',
fscore:''
})

const stuss = reactive({
term:'',
warningid:'',
stuid:'',
stuname:'',
stumajor:'',
stuclassi:'',
warningtype:'',
detail:''
})

onMounted(async () => {
get('/getallscore', (message) => {
    let filteredData = []
    if (store.auth.role != '学生') {
        filteredData = message
        totals.value = message.length
    } else {
        filteredData = message.filter(item => item.name === store.auth.user)
        totals.value = filteredData.length
    }
    datas.value = filteredData
}, (message) => {
    ElMessage.warning(message)
})
})


const deleteRow = (index) => {
post('/deletescore',{
flag:index
},(message)=>{
ElMessage.success(message)
num.value=index
datas.value.splice(index, 1)
},(message)=>{
ElMessage.warning(message)
})
}

const add=()=>{
post('/addscore',{
id:stu.id,
name:stu.name,
major:stu.major,
classi:stu.classi,
course:stu.course,
teachername:stu.teachername,
gredit:stu.gredit,
escore:stu.escore,
ascore:stu.ascore,
fscore:stu.fscore
},(message)=>{
ElMessage.success(message)
dialogVisible.value = false
datas.value.push({
id:stu.id,
name:stu.name,
major:stu.major,
classi:stu.classi,
course:stu.course,
teachername:stu.teachername,
gredit:stu.gredit,
escore:stu.escore,
ascore:stu.ascore,
fscore:stu.fscore
  })
stu.id='',
stu.name='',
stu.major='',
stu.classi='',
stu.course='',
stu.teachername='',
stu.gredit='',
stu.escore='',
stu.ascore='',
stu.fscore=''
},(message)=>{
ElMessage.warning(message)
dialogVisible.value = false
stu.id='',
stu.name='',
stu.major='',
stu.classi='',
stu.course='',
stu.teachername='',
stu.gredit='',
stu.escore='',
stu.ascore='',
stu.fscore=''
})
}
const getScoreByid=(index)=>{
post('/getscorebyflag',{
id:datas.value[index].id,
course:datas.value[index].course
},(message)=>{
dialogVisibles.value=true
stus.id=message.id
stus.name=message.name
stus.major=message.major
stus.classi=message.classi
stus.course=message.course
stus.teachername=message.course
stus.gredit=message.gredit
stus.escore=message.escore
stus.ascore=message.ascore
stus.fscore=message.fscore
},(message)=>{
ElMessage.warning(message)
})
}

const searchbyid=()=>{
post('/getscorebyid',{
id:idd.value
},(message)=>{
datas.value = []
datas.value = message
totals.value = datas.value.length
idd.value=''
},(message)=>{
idd.value=''
ElMessage.warning(message)
})
}

const getinfo=(index)=>{
post('/getscorebyflag',{
id:datas.value[index].id,
course:datas.value[index].course
},(message)=>{
dialogVisibless.value=true
stuss.stuid=message.id
stuss.stuname=message.name
stuss.stumajor=message.major
stuss.stuclassi=message.classi
stuss.term=message.term
},(message)=>{
ElMessage.warning(message)
})
}

const adds=()=>{
post('/updatescore',{
id:stus.id,
course:stus.course,
escore:stus.escore,
ascore:stus.ascore,
fscore:stus.fscore
},(message)=>{
ElMessage.success(message)
dialogVisibles.value = false
datas.value.splice(num,1,stus)
},(message)=>{
ElMessage.warning(message)
dialogVisibles.value = false
})
}

const send=()=>{
post('/addwarninginfo',{
stuid:stuss.stuid,
stuname:stuss.stuname,
stumajor:stuss.stumajor,
stucourse:stuss.stucourse,
stuclassi:stuss.stuclassi,
warningid:stuss.warningid,
warningtype:stuss.warningtype,
term:stuss.term,
detail:stuss.detail
},(message)=>{
ElMessage.success(message)
dialogVisibless.value = false
datas.value.splice(num,1,stuss)
stuss.term=''
stuss.stuid=''
stuss.stuname=''
stuss.stumajor=''
stuss.stucourse=''
stuss.stuclassi=''
stuss.warningid=''
stuss.warningtype=''
stuss.detail=''
},(message)=>{
ElMessage.warning(message)
dialogVisibless.value = false
  stuss.term=''
  stuss.stuid=''
  stuss.stuname=''
  stuss.stumajor=''
  stuss.stucourse=''
  stuss.stuclassi=''
  stuss.warningid=''
  stuss.warningtype=''
  stuss.detail=''
})
}

const getList=(pageNums)=>{
pageNum.value=pageNums
}

const getList1=(pageSizes)=>{
pageSize.value=pageSizes
}

</script>
<style scoped>
.red-bg {
  background-color: red;
}
</style>
